<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <text class="iconfont icon-search"></text>
      <input type="text" placeholder="搜索景点" v-model="searchKey" @input="onSearch" />
      <text class="clear-icon" v-if="searchKey" @tap="clearSearch">×</text>
    </view>

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <view class="filter-item" @tap="showFilter('area')">
        <text>区域</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
      <view class="filter-item" @tap="showFilter('type')">
        <text>类型</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
      <view class="filter-item" @tap="showFilter('price')">
        <text>价格</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
      <view class="filter-item" @tap="showFilter('more')">
        <text>更多</text>
        <text class="iconfont icon-arrow-down"></text>
      </view>
    </view>

    <!-- 景点列表 -->
    <view class="scenic-list">
      <!-- 搜索结果为空时显示 -->
      <view class="no-result" v-if="filteredScenics.length === 0">
        <image src="/static/images/no-result.png" mode="aspectFit"></image>
        <text>没有找到"{{searchKey}}"相关景点</text>
        <button class="reset-btn" @tap="clearSearch">清空搜索</button>
      </view>
      
      <view class="scenic-item" v-for="(scenic, index) in filteredScenics" :key="index" @tap="goToDetail(scenic)">
        <image class="scenic-image" :src="scenic.image" mode="aspectFill"></image>
        <view class="scenic-info">
          <view class="name-wrap">
            <text class="name">{{scenic.name}}</text>
            <text class="distance">{{scenic.distance}}km</text>
          </view>
          <view class="rating">
            <text class="score">{{scenic.score}}分</text>
            <text class="comment">"{{scenic.comment}}"</text>
          </view>
          <view class="tags">
            <text class="tag" v-for="(tag, idx) in scenic.tags" :key="idx">{{tag}}</text>
          </view>
          <view class="price-wrap">
            <view class="price">
              <text class="symbol">¥</text>
              <text class="number">{{scenic.price}}</text>
              <text class="unit">起</text>
            </view>
            <view class="action-btns">
              <text class="sold">月售{{scenic.sold}}+</text>
              <text class="view-map" @tap.stop="viewOnMap(scenic)">地图查看</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      scenics: [
        {
          id: 1,
          name: '故宫博物院',
          image: 'http://114.55.56.174:19000/shzy/故宫.jpg',
          distance: 2.5,
          score: 4.9,
          comment: '文化底蕴深厚 值得一游',
          tags: ['5A景区', '博物馆', '文化古迹'],
          price: 60,
          sold: 12345
        },
        {
          id: 3,
          name: '八达岭长城',
          image: 'http://114.55.56.174:19000/shzy/八达岭长城.jpg',
          distance: 15.8,
          score: 4.8,
          comment: '万里长城 雄伟壮观',
          tags: ['5A景区', '世界遗产', '打卡圣地'],
          price: 40,
          sold: 8765
        },
        {
          id: 2,
          name: '颐和园',
          image: 'http://114.55.56.174:19000/shzy/颐和园1.png',
          distance: 8.3,
          score: 4.9,
          comment: '皇家园林 美丽宁静',
          tags: ['5A景区', '世界遗产', '园林'],
          price: 40,
          sold: 15234
        },
        {
          id: 4,
          name: '大唐不夜城',
          image: 'http://114.55.56.174:19000/shzy/大唐不夜城.png',
          distance: 25.0,
          score: 4.7,
          comment: '历史与壮丽结合的经典',
          tags: ['5A景区', '历史遗址', '夜景'],
          price: 60,
          sold: 10500
        },
        {
          id: 5,
          name: '天坛公园',
          image: 'http://114.55.56.174:19000/shzy/天坛公园.png',
          distance: 3.0,
          score: 4.8,
          comment: '古老的祭天圣地',
          tags: ['5A景区', '世界遗产', '文化古迹'],
          price: 35,
          sold: 10234
        },
        {
          id: 6,
          name: '鸟巢',
          image: 'http://114.55.56.174:19000/shzy/鸟巢.png',
          distance: 5.5,
          score: 4.7,
          comment: '现代建筑的奇迹',
          tags: ['5A景区', '奥林匹克遗址', '现代建筑'],
          price: 50,
          sold: 8400
        },
        {
          id: 7,
          name: '圆明园',
          image: 'http://114.55.56.174:19000/shzy/圆明园.png',
          distance: 12.3,
          score: 4.6,
          comment: '古代皇家园林的遗址',
          tags: ['世界遗产', '园林', '历史遗址'],
          price: 40,
          sold: 9234
        },
        {
          id: 8,
          name: '北海公园',
          image: 'http://114.55.56.174:19000/shzy/北海公园.png',
          distance: 3.7,
          score: 4.7,
          comment: '古老的皇家园林，静谧美丽',
          tags: ['5A景区', '皇家园林', '文化古迹'],
          price: 30,
          sold: 8000
        },
        {
          id: 9,
          name: '大钟寺',
          image: 'http://114.55.56.174:19000/shzy/大钟寺.png',
          distance: 6.0,
          score: 4.6,
          comment: '佛教文化的历史遗址',
          tags: ['历史遗址', '佛教文化', '宗教场所'],
          price: 25,
          sold: 5120
        }
      ]
    }
  },
  methods: {
    showFilter(type) {
      console.log('显示筛选:', type)
      // TODO: 实现筛选功能
    },
    goToDetail(scenic) {
      uni.navigateTo({
        url: `/pages/scenic/detail?id=${scenic.id}`
      })
    },
    onSearch() {
      // TODO: 实现即时搜索功能
    },
    clearSearch() {
      this.searchKey = ''
    },
    viewOnMap(scenic) {
      // 跳转到地图页面并传递景点ID
      uni.navigateTo({
        url: `/pages/guide/map?spotId=${scenic.id}`
      });
    }
  },
  computed: {
    // 根据搜索关键词过滤景点
    filteredScenics() {
      if (!this.searchKey || this.searchKey.trim() === '') {
        return this.scenics;
      }
      
      const keyword = this.searchKey.toLowerCase().trim();
      return this.scenics.filter(scenic => 
        scenic.name.toLowerCase().indexOf(keyword) !== -1
      );
    }
  }
}
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background: #f8f8f8;
}

.search-bar {
  display: flex;
  align-items: center;
  margin: 20rpx;
  padding: 0 30rpx;
  height: 72rpx;
  background: #fff;
  border-radius: 36rpx;
  
  .iconfont {
    font-size: 32rpx;
    color: #999;
    margin-right: 10rpx;
  }
  
  input {
    flex: 1;
    height: 100%;
    font-size: 28rpx;
  }
  
  .clear-icon {
    font-size: 24rpx;
    color: #999;
    margin-left: 10rpx;
  }
}

.filter-bar {
  display: flex;
  background: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  
  .filter-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    
    .iconfont {
      font-size: 24rpx;
      color: #999;
      margin-left: 6rpx;
    }
  }
}

.scenic-list {
  padding: 0 20rpx;
  
  .no-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    
    image {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 30rpx;
    }
    
    text {
      font-size: 28rpx;
      color: #999;
      margin-bottom: 30rpx;
    }
    
    .reset-btn {
      font-size: 28rpx;
      color: #4080ff;
      background: rgba(64,128,255,0.1);
      padding: 10rpx 40rpx;
      border-radius: 30rpx;
    }
  }
  
  .scenic-item {
    display: flex;
    padding: 20rpx;
    background: #fff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    
    .scenic-image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }
    
    .scenic-info {
      flex: 1;
      
      .name-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        .name {
          font-size: 32rpx;
          font-weight: bold;
          color: #333;
        }
        
        .distance {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .rating {
        margin-bottom: 16rpx;
        
        .score {
          font-size: 28rpx;
          color: #ff9500;
          font-weight: bold;
          margin-right: 10rpx;
        }
        
        .comment {
          font-size: 24rpx;
          color: #666;
        }
      }
      
      .tags {
        margin-bottom: 16rpx;
        
        .tag {
          display: inline-block;
          padding: 4rpx 16rpx;
          font-size: 24rpx;
          color: #4080ff;
          background: rgba(64,128,255,0.1);
          border-radius: 4rpx;
          margin-right: 16rpx;
        }
      }
      
      .price-wrap {
        display: flex;
        align-items: baseline;
        
        .price {
          margin-right: 16rpx;
          
          .symbol {
            font-size: 24rpx;
            color: #ff4d4f;
          }
          
          .number {
            font-size: 36rpx;
            font-weight: bold;
            color: #ff4d4f;
          }
          
          .unit {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .action-btns {
          display: flex;
          align-items: center;
          
          .sold {
            font-size: 24rpx;
            color: #999;
          }
          
          .view-map {
            font-size: 24rpx;
            color: #4080ff;
            margin-left: 10rpx;
          }
        }
      }
    }
  }
}
</style> 